import { FC, useState } from "react";
import StatHead from "./StatHead";
import style from './index.module.scss'
import classnames from 'classnames/bind'
import ComponentLib from "./ComponentLib";
import useLoadQuestion from "../../hooks/useloadQuestion";
import { Spin } from "antd";
import useGetQuestion from "../../hooks/useGetQuestion";
import StatTable from "./StatTable";
import { componentPropsType } from "../../questioncomponents";
import StateEchart from "./StateEchart";


const CBN = classnames.bind(style)
const StatPages:FC = () => {
    const {loading} = useLoadQuestion()
    const {componentList} = useGetQuestion()
    const [selectedId,setSelectedId] = useState('')
    const [componentProps,setComponentProps] = useState<componentPropsType>()
    if(loading){
       
        return <div style={{display:'flex',alignItems:'center',justifyContent:'center',height:'100%'}}>
             <Spin  size='large'>
                
            </Spin>
        </div>
    }
    if(!componentList){
        return <>
            null
        </>
    }

    return <div className={CBN('statPages')}>
        <StatHead></StatHead>
        <div className={CBN('statContainer')}>
            <div className={CBN('statLeft')}>
                <ComponentLib componentProps = {componentProps} componentList = {componentList} selectedId = {selectedId == '' ? componentList[0]?.fe_id : selectedId} setSelectedId={ setSelectedId }></ComponentLib>
            </div>
            <div className={CBN('statMid')}>
                <StatTable setComponentProps = {setComponentProps} componentList = {componentList} selectedId = {selectedId == '' ? componentList[0]?.fe_id : selectedId} setSelectedId={ setSelectedId }></StatTable>
            </div>
            <div className={CBN('statRight')}>
                <StateEchart selectedId = {selectedId == '' ? componentList[0]?.fe_id : selectedId} ></StateEchart>
            </div>
        </div>
    </div>
}

export default StatPages